<template>
    <div class="piao">
         <div class="item" v-for="(item,index) in piaolist" :key="index">
           <div class="item-title border-bottom">
            <span class="item-title-icon"></span>
            {{item.title}}
            <p class="item-num"><span class="item-num-spec">{{item.money}}</span></p>
           </div>
           <div v-if="item.children">
            <detail-piao :piaolist="item.children"></detail-piao>
            
           </div>



          
           
           
          
           
        </div>
       
    </div>
   
</template>

<script>
    
    import DetailRecommend from './recommend'
    export default {
        name:"DetailPiao",
        components:{DetailRecommend},
        props:{
            piaolist:Array,
            
        }
    }
</script>

<style lang="stylus" scoped>

.piao
      background #fff
      padding .2rem     
    .item-title
      line-height .8rem
      font-size .32rem 

    .border-bottom
      border-bottom 1px solid #e0e0e0;
     .item-title-icon    
        display: inline-block;
        width: .36rem;
        height: .36rem;
        position relative
        top: .08rem;
        left: .1rem;
        background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
        background-size: .4rem 3rem; 
        margin-right .1rem
     .item-num
          float right
          padding-right .15rem 
          font-size: .2rem;
          color: #ff8300;
          line-height: .8rem;
      .item-num-spec
           font-size: .3rem;  
          
    
    
</style>